<template>
  <div class='u-roleConfigure'>
    <!-- dialog -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :before-close="closeDialog">
      <!-- 已添加员工列表 -->
      <div class='u-roleConfigure-staffWrap'>
        <ul class='list'>
          <li
            v-for='(v) in selectedData' :key='v.id'
            class='item'
          >
            <i class='close el-icon-close' @click='closeStaff(v.id)'></i>
            <p>{{ v.name }}</p>
          </li>
        </ul>
      </div>
      <!-- 表格 -->
      <a-table :data='tableData' :cols='tableKeys'>
        <el-table-column align="center" label="操作" width='100' slot='ahead'>
          <template slot-scope="scope">
            <div class='u-roleConfigure-table-handle'>
              <el-button size='mini' @click='addHandle(scope.row.id)'>添加</el-button>
            </div>
          </template>
        </el-table-column>
      </a-table>
      <div class='u-pagination'>
        <!-- 分页 -->
        <pagination ref='tablePage' @change='getTableData' :action='fetchTableData' :pageSize='10'></pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'u-roleConfigure',

  props: ['id', 'getSelectedDataPath', 'addPath', 'deletePath', 'idKey', 'configType', 'title', 'typeName'],

  data() {
    return {
      ifRequesting: false,
      dialogVisible: false,
      tableKeys: [],
      tableData: [],
      selectedData: []
    }
  },

  created() {
    if (this.configType === 'role') {
      this.tableKeys = [
        { prop: 'name', label: '角色名称' }
      ]
    } else {
      this.tableKeys = [
        { prop: 'mobile', label: '登录账户' },
        { prop: 'name', label: '员工名称' }
      ]
    }
  },

  methods: {
    show() {
      this.dialogVisible = true
      this.updateData()
    },

    async getRole() {
      return this.$api.firmGetStaffRoles({
        aStaffId: this.id,
        aIsOwned: 0,
        aIsUnder: 0
      })
    },

    async getStaff(aPageNum, aPageSize) {
      return this.$api.firmGetStaffSubordinates({
        aPageNum,
        aPageSize,
        aStaffId: this.id,
        aIsUnder: 0
      })
    },

    async fetchTableData(aPageNum, aPageSize) {
      if (this.configType === 'role') {
        return this.getRole()
      } else {
        return this.getStaff(aPageNum, aPageSize)
      }
    },

    getTableData(data) {
      this.tableData = data
    },

    async getSelectedData() {
      const { code, data } = await this.$api[this.getSelectedDataPath]({
        aStaffId: this.id,
        aIsOwned: 1,
        aIsUnder: 1
      })
      if (code === 0) {
        console.log(data)
        this.selectedData = data.list
      }
    },

    updateData() {
      this.$nextTick(() => {
        this.$refs.tablePage.changePage(1)
        this.getSelectedData()
      })
    },

    async addHandle(id) {
      if (this.ifRequesting) return false
      this.ifRequesting = true
      const { code } = await this.$api[this.addPath]({
        [this.idKey]: id,
        aStaffId: this.id
      })
      this.ifRequesting = false
      if (code === 0) {
        await this.$refs.tablePage.changePage()
        this.getSelectedData()
        this.$notify({
          type: 'success',
          title: `添加${this.typeName}`,
          message: '成功'
        })
      }
    },

    async closeStaff(id) {
      if (this.ifRequesting) return false
      this.ifRequesting = true
      const { code } = await this.$api[this.deletePath]({
        [this.idKey]: id,
        aStaffId: this.id
      })
      this.ifRequesting = false
      if (code === 0) {
        this.$refs.tablePage.changePage()
        this.getSelectedData()
        this.$notify({
          type: 'success',
          title: `移除${this.typeName}`,
          message: '成功'
        })
      }
    },

    closeDialog() {
      this.dialogVisible = false
      this.$emit('close')
    }
  }
}
</script>

<style lang='less'>
.u-roleConfigure {
  &-staffWrap {
    font-size: 12px;
    .list {
      display: flex;
      flex-wrap: wrap;
      max-height: 104px;
      overflow-y: auto;
    }
    .item {
      height: 30px;
      width: 80px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      border: solid 1px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20px;
      margin-bottom: 20px;
      border-radius: 3px;
      position: relative;
      p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .close {
        display: block;
        position: absolute;
        right: 1px;
        top: 1px;
      }
    }
  }
}
</style>